<template>
	<view class="home">
		<view class="banner">
			<u-swiper keyName="thumb" indicator radius="10" indicatorMode="dot" height="150" :list="banner"
				@click="bannerClick"></u-swiper>
		</view>
		<view class="notice" v-if="nlist.length>0">
		<u-notice-bar direction="column" style="font-weight: 600;" mode="link" icon="/static/ico/icon/notice.png" url="/pages/Info/index"
			bgColor="#fff" speed="350" color="#141519" :text="announcements" />
			<!-- <u-notice-bar :text="announcements" icon="/static/ico/icon_notices.png" @tap="getns" bgColor="#0E0F27"
				color="#A1A1AB" direction="column" speed="350" style="border-radius:10rpx;"></u-notice-bar>
			<image @click="toPage('/pages/Info/index')" src="@/static/ico/more.png" mode="aspectFit" class="more">
			</image> -->
		</view>
		<!-- <u-sticky :offset-top="top" style="margin-top:15rpx;">
			<u-tabs
				:list="tabs"
				:current="current"
				:activeStyle="{
					fontSize: '32rpx',
					color: '#fff'
				}"
				:inactiveStyle="{fontSize: '26rpx'}"
				lineWidth='25'
				lineHeight="4"
				lineColor="#1BDFE9"
				@change="changeTab">
			</u-tabs>
		</u-sticky> -->
		<!-- v-if="current==0" -->
		<view class="collection">
			<u-skeleton rows="2" titleWidth="100%" titleHeight="150" :loading="loading">
				<!-- <block v-for="(item,i) in special_list" :key="i"> -->
				<GoodsCard :list="special_list"></GoodsCard>
				<!-- </block> -->
				<block v-if="!loading&&special_list.length<1">
					<Empty text="暂无藏品"></Empty>
				</block>
			</u-skeleton>
		</view>
		<view class="calendar" v-if="current==1">
			<u-skeleton rows="2" titleWidth="100%" titleHeight="150" :loading="loading">
				<view class="share">
					<view class="jqfs">
						近期发售计划
					</view>
					<!-- <image src="@/static/images/fsjh.png" mode="aspectFit"></image> -->

					<view style="display:flex;" v-if="calendar_list.length>0">
						<u-button shape="circle"
							style="margin-right:8px;background: linear-gradient(180deg, #F0F0F0 0%, #D7D7D7 100%); font-size: 24rpx; font-weight: 600;"
							@click="lookred" v-show="read_show==false">订阅</u-button>
						<u-button shape="circle"
							style="margin-right:8px;background:transparent;white-space: nowrap; color: #666666; background: linear-gradient(180deg, #F0F0F0 0%, #D7D7D7 100%); font-size: 24rpx;font-weight: 600;"
							v-show="read_show">已订阅</u-button>
						<u-button shape="circle" @click="toshare"
							style="background: linear-gradient(180deg, #F0F0F0 0%, #D7D7D7 100%); font-weight: 600;font-size: 24rpx;">
							分享</u-button>
					</view>

				</view>
				<block v-for="(item,index) in calendar_list" :key="index">
					<view class="calendar_cont">
						<view class="day">{{item.sell_time|FormatYear}}</view>
						<view class="box">
							<block v-for="iitem in item.list" :key="iitem.id">
								<view class="item">
									<view class="time">{{iitem.sell_time|FormatTime}}</view>
									<view class="item_cont">
										<view class="imgbox">
											<image :src="iitem.thumb" mode="scaleToFill"></image>
										</view>

										<view class="cont">
											<view class="title u-line-1">{{iitem.title}}</view>
											<view class="number">
												<text>限量</text>
												<text>{{iitem.all_count}}份</text>
											</view>
											<view class="price">¥{{iitem.base_price}}</view>
										</view>
									</view>
								</view>
							</block>
						</view>
					</view>
				</block>
				<block v-if="!loading&&calendar_list.length<1">
					<Empty text="暂无发售"></Empty>
				</block>
			</u-skeleton>

		</view>
		<view class="featured" v-if="current==2">
			<block v-for="item in list" :key="item.id">
				<view class="item" @tap="toPage(`/subpage/Featured/details?id=${item.id}`)">
					<image :src="item.thumb" mode="aspectFill"></image>
					<view class="cont">
						<view class="title u-line-1">{{item.title}}</view>
						<view class="des u-line-2">{{item.description}}</view>
					</view>
				</view>
			</block>
			<block v-if="!loading&&list.length<1">
				<Empty text="暂无内容"></Empty>
			</block>
		</view>
		<view class="integral" v-if="current==3">
			<view class="integral-container">
				<view class="integral-item">
					<view class="rank">排行</view>
					<view class="name">用户名</view>
					<view class="number">积分总数</view>
				</view>
				<view class="integral-item" v-for="(item, index) in integralList" :key="index">
					<view class="rank">{{ index + 1}}</view>
					<view class="name">{{ item.nickname }}</view>
					<view class="number">{{ item.number }}</view>
				</view>
			</view>
		</view>
		<!-- <view class="fload fadeInRight" v-if="yzshow">
			<view class="txts">
				完成实名认证,抢购快人一步
			</view>
			<view class="right">
				<view class="btn" @click="toPage('/subpage/Verified/index')">
					{{ userInfo.real_name_status == 0 ? '实名认证' : (Boolean(userInfo.is_face) || !userInfo.face_switch) ? '实名认证' : '人脸识别'}}
				</view>
				<image src="../../static/images/gb.png" @click="yzshow=false" mode="aspectFit" class="gbico"></image>
			</view>

		</view> -->

		<!-- <Nav></Nav> -->
		<updateApp :updateData="getUpdataData" ref="updataApp" @finshUpdate="getFinshUpdate"></updateApp>

		<shareRl ref="draw" v-if="show" :share='show' @close="close" />

		<u-back-top :scroll-top="scrollTop" :customStyle="customStyles" :iconStyle="iconStyle"></u-back-top>
	</view>
</template>

<script>
	import {
		mixin
	} from '@/Mixins/mixin.js'
	import Nav from "@/components/Nav.vue"
	import Empty from "@/components/Empty.vue"
	import updateApp from '@/components/updateApp.vue';
	import shareRl from '@/components/shareRl.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		addSchedule
	} from '@/uni_modules/vv-schedule'
	import GoodsCard from "@/components/GoodsCard.vue"
	export default {
		mixins: [mixin],
		components: {
			Nav,
			Empty,
			updateApp,
			shareRl,
			GoodsCard
		},
		data() {
			return {

				// #ifdef MP-WEIXIN
				top: 60,
				// #endif
				// #ifdef H5||APP
				top: 0,
				shape: false,
				// #endif
				src: '',
				current: 0, //当前tab
				read_show: false, //是否订阅
				loading: false,
				page: 1,
				size: 10,
				banner: [],
				list: [],
				calendar_list: [], //发售日历
				special_list: [], //数字藏品
				tabs: [{
					name: '数字藏品'
				}, {
					name: '发售日历'
				}, {
					name: '内容精选'
				}, {
					name: '积分排行'
				}],
				getUpdataData: {
					href: 'http://www.baidu.com', //这是下载的url,
					desc: '', //描述，隔行的最好加上<br> desc.replace(/\r\n/g,'<br>'),
					version_name: '',
					type: ''
				},
				yzshow: false,
				show: false,
				scrollTop: 0,
				iconStyle: {
					color: '#ffffff'
				},
				customStyles: {
					width: '50rpx',
					background: '#000000',
					position: 'absolute',
					right: '0'
				},
				announcements: "",
				nlist: [],
				total: 0,
				integralList: []
			}
		},
		computed: {
			...mapState(['userInfo', 'subscribeDay'])
		},
		onReady() {

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShow() {
			//#ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, inf => {
				// console.log('inf-----', inf);
				var c = inf.version;
				var t = plus.os.name.toLocaleLowerCase() == 'ios' ? 2 : 1;
				this.get(c, t);
			});
			//#endif
			// this.get('1.0.0', 1);
			this.getbanner()

			// 人脸识别开关 开 -> 判断人脸 关 -> 反之
			if (this.userInfo.face_switch) {
				if ((this.userInfo.real_name_status == 0 || !Boolean(this.userInfo.is_face))) {
					this.yzshow = true
				} else {
					this.yzshow = false
				}
			} else {
				// if ((this.userInfo.real_name_status == 0)) {
				// 	this.yzshow = true
				// } else {
				// 	this.yzshow = false
				// }
				this.yzshow = this.userInfo.real_name_status == 0
			}
			
			this.getnList()
		},
		onLoad(e) {
			// uni.hideTabBar()
			if (e.current) {
				this.current = e.current
			}
			this.page = 1
			if (this.current == 0) {
				this.specialList()
			} else if (this.current == 1) {
				this.sellCalendar()
			} else if (this.current == 2) {
				this.getList()
			} else {
				this.getIntegral()
			}

			// if(localStorage.getItem('read_show')){
			// 	this.read_show=localStorage.getItem('read_show');
			// 	console.log(localStorage.getItem('read_show'));
			// }else{
			// 	this.read_show=false;
			// }

		},
		onPullDownRefresh() {
			this.page = 1
			this.getbanner()
			this.integralList = []
			if (this.current == 0) {
				this.specialList()
			} else if (this.current == 1) {
				this.sellCalendar()
			} else if (this.current == 2) {
				this.getList()
			} else {
				this.getIntegral(this.page)
			}
		},
		onReachBottom() {
			// console.log('[触底]')
			if (this.current == 0) {
				if (this.total - this.special_list.length > 0) {
					this.specialList()
				}
			} else if (this.current == 1) {
				this.sellCalendar()
			} else if (this.current == 2) {
				this.getList()
			} else {
				this.getIntegral(++this.page)
			}
		},
		onShareAppMessage(res) {
			return {
				title: '近期发售计划',
				imageUrl: '',
				path: '/pages/Index/index?current=1'
			}
		},
		methods: {
			// 获取积分排行
			async getIntegral (page) {
				try{
					if (page >= 6) return 
					const {code, data, msg} = await this.$http({
						url: `${this.$api.getIntegral}/${page}`,
						method: 'GET',
						hideLoading: true
					})
					if (code !== 200) return
					if (data.length > 0) {
						this.integralList.push(...data)
					}
				}catch(e){
					//TODO handle the exception
				}
			},
			async getnList() {
				let list = await this.articleList(2, 1, 5)
				if (list.code == 200) {
					this.nlist = list.data
					if (this.nlist) {
						this.announcements = []
						this.nlist.map(el => {
							this.announcements.push(el.title)
						})
					}
					console.log('[公告]' + JSON.stringify(this.announcements));
				}
			},
			getns(e) {
				uni.navigateTo({
					url: '/pages/Info/detail?id=' + this.nlist[e].id
				});
			},
			toshare() {
				this.show = true
			},
			close() {
				this.show = false
			},
			async get(c, t) {
				let res = await this.$http({
					url: this.$api.getversion,
					method: 'get',
					hideLoading: true,
					data: {
						client_version: c,
						client_type: t
					}
				})
				console.log(res);
				if (res.data.upgrade.length != 0) {
					this.getUpdataData.href = res.data.upgrade.version_url
					this.getUpdataData.desc = res.data.upgrade.remarks.replace(/\r\n/g, '<br>')
					this.getUpdataData.version_name = res.data.upgrade.version
					this.getUpdataData.show = true
					this.getUpdataData.type = t
				}
			},
			getFinshUpdate(e) {},
			async lookred() {
				if (this.calendar_list.length > 0) {
					let time = this.calendar_list[0]?.sell_time.replace(/-/g, '/')
					let start = uni.$u.timeFormat(new Date(start).getTime(), 'yyyy/mm/dd 08:00:00')
					let end = new Date(time).getTime() + 86400000
					end = uni.$u.timeFormat(new Date(end).getTime(), 'yyyy/mm/dd 00:00:00')
					console.log('[开始时间]', start, end)
					await addSchedule({
						title: '疯传数藏近期发售',
						description: '藏品发售',
						dtstart: new Date(start).getTime(),
						dtend: new Date(end).getTime(),
					})
					this.$store.commit('ChangeSubscribeDay', this.calendar_list[0]?.sell_time);
					this.read_show = true
					uni.showToast({
						title: '日程添加成功'
					})
				}


			},
			remindme() {
				console.log("提醒我");

			},
			//获取banner
			async getbanner() {
				let banner = await this.articleList(3)
				if (banner.code == 200) {
					this.banner = banner.data
					console.log(this.banner)
				}
				// console.log('banner',banner)
				// let list = await this.articleList(2)
				// if(list.code == 200){
				// 	for(let i=0;i<list.data.length;i++){
				// 		this.announcements[i] = list.data[i].title;
				// 	}
				// 	console.log(JSON.stringify(this.announcements));
				// }
			},
			//内容精选
			async getList() {
				let list = await this.articleList(4, this.page, this.size)
				if (list.code == 200) {
					if (this.page == 1) {
						this.list = []
					}
					if (this.list.length < list.total) {
						this.list = this.list.concat(list.data)
						this.page += 1
					}
				}
			},
			bannerClick(e) {
				console.log('[点击轮播图]', e)
				if (this.banner[e].special_ids) {
					this.toPage(`/pages/activities/blindBox/index?id=${this.banner[e].special_ids}`);
				} else
				if (this.banner[e].link_url) {
					//#ifdef H5
					window.open(this.banner[e].link_url)
					//#endif
					// #ifdef APP
					plus.runtime.openURL(this.banner[e].link_url)
					// #endif
				} else
				if (this.banner[e].out_type == 2 && this.banner[e].out_id) {
					this.toPage(`/pages/Info/detail?id=${this.banner[e].out_id}`);
				} else
				if (this.banner[e].out_type == 1 && this.banner[e].special_ids) {
					this.toPage('/subpage/Product/details?id=' + this.banner[e].special_ids);
				} else {
					this.toPage(`/pages/Info/detail?id=${this.banner[e].id}`);
				}

				// return
				// // console.log(e,this.banner[e]);
				// // console.log(this.banner[e].special_ids)
				// let id=this.banner[e].special_ids;
				// if(id==null){
				// 	return false
				// }else{
				// 	this.toPage('pages/compose/index?id='+id);
				// }

			},
			//切换tabs
			changeTab(e) {
				// console.log(e)
				this.integralList = []
				if (e.index != this.current) {
					this.current = e.index
					this.page = 1
					if (this.current == 0) {
						this.specialList()
					} else if (this.current == 1) {
						this.sellCalendar()
					} else if (this.current == 2) {
						this.getList()
					} else {
						this.getIntegral(this.page)
					}
				}
			},
			//数字藏品
			async specialList() {
				let data = await this.$http({
					url: this.$api.specialList,
					method: 'GET',
					hideLoading: true,
					data: {
						page: this.page,
						page_size: this.size,
					}
				})
				// console.log('[数字藏品]',JSON.stringify(data))
				let list = data.data
				if (data.code == 200) {
					if (this.page == 1) {
						this.special_list = []
					}
					list.data.map(item => {
						let sell_time = item?.sell_time
						if (sell_time) {
							let oldTime = new Date(sell_time.replace(/-/g, '/')).getTime()
							let time = oldTime - new Date().getTime()
							if (time > 0 && time > 86400000) {
								item.show = true
								item.sell_date = item.sell_time.substring(5, 10);
								item.sell_t = item.sell_time.substring(11, 16);

							} else if (time > 0 && time < 86400000) {
								item.show1 = true
							} else {
								item.show = false
							}
							item.time = time
						}

					})
					this.total = list.total
					if (this.special_list.length < list.total) {
						this.special_list = this.special_list.concat(list.data)
						this.page += 1
					}
				} else {
					return []
				}
			},
			//发售日历
			async sellCalendar() {
				let data = await this.$http({
					url: this.$api.sellCalendar,
					method: 'POST',
					hideLoading: true,
					data: {
						page: this.page,
						page_size: this.size,
					}
				})
				// console.log('[发售日历]',data)
				let list = data.data
				if (data.code == 200) {
					if (this.page == 1) {
						this.calendar_list = []
					}
					if (this.calendar_list.length < list.total) {
						this.calendar_list = this.calendar_list.concat(list.data)
						if (this.calendar_list.length > 0) {
							console.log('[发售日历]', this.calendar_list[0].sell_time, this.subscribeDay)
							if (this.calendar_list[0].sell_time != this.subscribeDay) {
								this.read_show = false
							} else {
								this.read_show = true
							}
						}
						this.page += 1
					}
				} else {
					return []
				}
			},
			onFinish(id) {
				// console.log('[id]',id)
				let index = this.special_list.findIndex(item => {
					return item.id == id
				})
				this.special_list[index].show = false
			}
		},
		filters: {
			FormatYear(e) {
				// e.substring(5)
				return e.substring(5).replace("-", "月") + '日'
			},
			FormatTime(e) {
				return e.substring(10, 16)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		min-height: 100vh;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: linear-gradient(#FFF 0%, #f5f5f5 50%, #f5f5f5 100%);

		::v-deep .u-tabs {
			// background-color: $nft-page-bg-color;

			.u-tabs__wrapper__nav__item__text {
				font-size: 32rpx;
			}

		}

		.banner {
			// width: 348rpx;
			// height: 180px;
			margin-bottom: 32rpx;
		}

		.notice {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			// border: 1px solid #f8f8f8;

			.more {
				height: 36rpx;
				width: 36rpx;
				margin-right: 30rpx;
			}
		}

		.nav_left,
		.nav_right {
			font-size: 32rpx;
			color: #FFFFFF;

		}

		.nav_left {
			display: flex;
			align-items: center;

			image {
				width: 80rpx;
				height: 50.4rpx;
				margin-right: 10rpx;
			}
		}

		.collection {
			width: 100vw;
			background: #F5F5FA;
			padding: 20rpx 0 80rpx 0;
			// padding-top: 30rpx;
			// padding-bottom: 80rpx;
			border-radius: 32px 32px 0px 0px;
			margin-left: -30rpx;
		}

		.calendar {
			padding-top: 35rpx;
			padding-bottom: 80rpx;

			.share {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 22rpx;

				// text{
				// 	font-size: 40rpx;
				// 	color: #F0E1C0;
				// 	line-height: 44rpx;
				// }
				.jqfs {
					font-size: 34rpx;
					font-weight: 800;
					background: linear-gradient(105deg, #000000 0%, #9a9a9a 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				image {
					// width: 278rpx;
					// height: 42rpx;
					width: 200rpx;
					height: 30rpx;

				}

				::v-deep button {
					width: 120rpx;
					height: 56rpx;
					background: #F1E1BF;
					font-size: 24rpx;
					font-weight: 400;
					color: #493A1E;
					border: 0;
					margin: 0;
				}
			}

			.calendar_cont {
				background: #EBEBEB;
				border-radius: 28rpx;
				margin-bottom: 20rpx;
				padding: 20rpx 0rpx 0rpx 0rpx;

				.day {
					// padding: 18rpx 30rpx 0 30rpx;
					// border:1px solid #000;
					font-size: 40rpx;
					font-weight: 600;
					color: #000;
					padding-left: 20rpx;
				}

				.item {
					border-radius: 28rpx;

					.time {
						font-size: 36rpx;
						font-weight: 500;
						color: #000;
						padding: 0rpx 28rpx 16rpx 20rpx;
					}

					.item_cont {
						display: flex;
						justify-content: space-between;
						align-items: center;
						background: #FFF;
						border-radius: 28rpx;

						.imgbox {
							width: 238rpx;
							height: 236rpx;

							image {
								width: 238rpx;
								height: 236rpx;
								border-radius: 28rpx;
							}
						}

						.cont {
							width: calc(100% - 238rpx);
							box-sizing: border-box;
							padding: 26rpx 26rpx 26rpx 48rpx;
							border-radius: 5rpx;
							background: url(../../static/ico/bg.png) right top no-repeat;
							background-size: 374rpx 466rpx;
							background-position: 42px 34px;

							.title {
								font-size: 32rpx;
								font-weight: 600;
								color: #000;
								margin-bottom: 16rpx;
							}

							.number {
								font-size: 0;
								margin-bottom: 24rpx;

								text {
									font-size: 20rpx;
									font-weight: 400;
									color: #FFF;
									padding: 4rpx 14rpx;
									background: #000;
									border-radius: 4rpx 0rpx 0rpx 4rpx;
									text-align: center;

									&:nth-child(2) {
										color: #FFF;
										background: #B6B6B6;
										border-radius: 0px 4rpx 4rpx 0px;
									}
								}
							}

							.price {
								font-size: 40rpx;
								font-weight: bold;
								color: #000;
							}
						}
					}

				}
			}
		}

		// ::v-deep .u-popup__content {
		// 	background-color: transparent
		// }
		.fload {
			width: 695rpx;
			height: 106rpx;
			background: #fff;
			border-radius: 8rpx;
			margin: 10rpx auto;
			position: fixed;
			bottom: 130rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.txts {
				font-size: 24rpx;
				font-weight: 600;
				color: #000;
				line-height: 34rpx;
				padding-left: 40rpx;
			}

			.right {
				display: flex;
				align-items: center;

				.btn {
					width: 158rpx;
					height: 58rpx;
					// background: #F2E0BC;
					background: #1BDFE9;
					border-radius: 200rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #fff;
					line-height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 20rpx;
				}

				.gbico {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.share_pop {
			width: 100vw;
			height: 100vh;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;

			image {
				width: 540rpx;
				height: 686rpx;
				margin: 0 auto 114rpx auto;
				background-color: #FFFFFF;
			}
		}

		.featured {
			padding-top: 60rpx;
			padding-bottom: 80rpx;

			.item {
				background: #FFFFFF;
				border-radius: 42rpx;
				font-size: 0;
				margin-bottom: 40rpx;
				box-shadow: 2px 2px 8px 6px rgba(230, 230, 230, 0.5);

				image {
					width: 100%;
					height: 318rpx;
					border-radius: 40rpx;
				}

				.cont {
					padding: 20rpx 34rpx;

					.title {
						font-size: 32rpx;
						font-weight: 600;
						color: #000;
					}

					.des {
						font-size: 24rpx;
						font-weight: 500;
						color: #999;
						line-height: 34rpx;
					}
				}
			}
		}
		.integral {
			padding: 20rpx;
			.integral-container {
				width: 100%;
				// border: 1px solid #ccc;
				border-radius: 20rpx;
				box-shadow: 2px 2px 8px 6px rgba(230, 230, 230, 0.5);
				.integral-item {
					display: flex;
					justify-content: space-around;
					font-size: 28rpx;
					text-align: center;
					padding: 20rpx;
					.rank {
						width: 33%;
					}
					.name {
						width: 33%;
					}
					.number {
						width: 33%;
					}
				}
			}
		}
	}
</style>
